<template>
    <div class="red">
         <el-col :span="5">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <!-- <span slot="title">首页</span> -->
        <router-link  slot="title"  to='/home'  class=""   tag="span">
                首页
        </router-link>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-menu"></i>
        <!-- <span slot="title">商品</span> -->
        <router-link  slot="title"  to='/goods'    tag="span">
               商品
        </router-link>

      </el-menu-item>
      <el-menu-item index="4" >
        <i class="el-icon-document"></i>
        <!-- <span slot="title">分类</span> -->
        <router-link  slot="title"  to='/cate'    tag="span">
                分类
        </router-link>

      </el-menu-item>
      <el-menu-item index="5">
        <i class="el-icon-setting"></i>
        <!-- <span slot="title">订单</span> -->
        <router-link  slot="title"  to='/order'    tag="span">
                订单
        </router-link>
        
      </el-menu-item>
      <el-menu-item index="6">
        <i class="el-icon-setting"></i>
        <!-- <span slot="title">用户</span> -->
        <router-link  slot="title"  to='/user'    tag="span">
               用户
        </router-link>
        
      </el-menu-item>
    </el-menu>
  </el-col>
    </div>
</template>

<script>
export default {
    data() {
        return {

        };
    },
    created() {

    },
    mounted() {

    },
    methods: {
         handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
};
</script>

<style scoped>
.el-menu-vertical-demo{
  width: 100px;
}
</style>
